<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#304156"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    router
    @close="handleClose"
  >
    <el-sub-menu v-for="item in menus" :index="'index'+item.id">
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item v-for="subitem in item.children" :index="'/' + subitem.url">
        {{ subitem.name }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {storeToRefs} from 'pinia'
import { useUserStore } from "../store/index";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
const userStore = useUserStore();

const {menus}=storeToRefs(userStore);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// const menus = userStore.menus;
</script>
